<template>
  <div>
    <el-tabs type="border-card">
      <el-tab-pane label="员工信息">
        <div>
          <el-table :data="tableData.records" style="width: 100%">

            <el-table-column label="入职日期" width="180">
              <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.createTime }}</span>
              </template>
            </el-table-column>

            <el-table-column label="个人资料" width="180">
              <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">
                  <p>姓名: {{ scope.row.name }}</p>
                  <p>年龄: {{ scope.row.age }}</p>
                  <p>性别: {{ scope.row.gender }}</p>
                  <p>住址: {{ scope.row.address }}</p>
                  <p>手机号: {{ scope.row.phone }}</p>
                  <div slot="reference" class="name-wrapper">
                    <el-tag size="medium">{{ scope.row.name }}</el-tag>
                  </div>
                </el-popover>
              </template>
            </el-table-column>

            <el-table-column label="头像">
              <template slot-scope="scope">
                <el-image
                    style="width: 100px; height: 100px"
                    :src="scope.row.avatar"
                    :fit="scope.row.name">
                </el-image>
              </template>
            </el-table-column>

            <el-table-column label="资历" width="180">
              <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">
                  <p>学校: {{ scope.row.graduationSchool }}</p>
                  <p>学历: {{ scope.row.education }}</p>
                  <p>工作时间:{{scope.row.workTime}}</p>
                  <div slot="reference" class="name-wrapper">
                    <el-tag size="medium">{{ scope.row.graduationSchool }}</el-tag>
                  </div>
                </el-popover>
              </template>
            </el-table-column>

            <el-table-column label="所属部门" width="180">
              <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">
                  <p>所属部门: {{ scope.row.deptName }}</p>
                  <p>工作岗位: {{ scope.row.position }}</p>
                  <p>直属领导:{{scope.row.leader}}</p>
                  <p>领导电话:{{scope.row.leaderPhone}}</p>
                  <div slot="reference" class="name-wrapper">
                    <el-tag size="medium">{{ scope.row.deptName }}</el-tag>
                  </div>
                </el-popover>
              </template>
            </el-table-column>

            <el-table-column label="状态">
              <template slot-scope="scope">
                <el-switch
                    v-model="scope.row.status === 0"
                    active-color="#13ce66"
                    inactive-color="#ff4949">
                </el-switch>
              </template>
            </el-table-column>

            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                    size="mini"
                    @click="handleEdit(scope.row.id)">编辑</el-button>
                <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>

          </el-table>

          <el-pagination
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-size="tableData.size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="tableData.total">
          </el-pagination>

          <el-dialog title="编辑员工信息" :visible.sync="dialogFormVisible">
            <el-form :model="staff">

              <el-form-item label="员工姓名" label-width="100px">
                <el-input v-model="staff.name" autocomplete="off"></el-input>
              </el-form-item>

              <el-form-item label="员工手机号" label-width="100px">
                <el-input v-model="staff.phone" autocomplete="off"></el-input>
              </el-form-item>

              <el-form-item label="员工住址" label-width="100px">
                <el-input v-model="staff.address" autocomplete="off"></el-input>
              </el-form-item>

              <el-form-item label="员工年龄" label-width="100px">
                <el-input-number v-model="staff.age" :min="1" :max="100" label="年龄"></el-input-number>
              </el-form-item>

              <el-form-item label="员工性别" label-width="100px">
                <el-select v-model="staff.gender" placeholder="请选择员工性别">
                  <el-option label="男" value="男"></el-option>
                  <el-option label="女" value="女"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="毕业学校" label-width="100px">
                <el-input v-model="staff.graduationSchool" autocomplete="off"></el-input>
              </el-form-item>

              <el-form-item label="学历" label-width="100px">
                <el-select v-model="staff.education" placeholder="请选择员工学历" style="width:400px">
                  <el-option label="研究生" value="研究生"></el-option>
                  <el-option label="本科" value="本科"></el-option>
                  <el-option label="专科" value="专科"></el-option>
                  <el-option label="其他" value="其他"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="所属部门" label-width="100px">
                <el-select v-model="staff.deptName" placeholder="请选择员工部门">
                  <el-option :label="obj.deptName" :value="obj.deptName" v-for="obj in deptList" :key="obj.id"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="岗位" label-width="100px">
                <el-select v-model="staff.position" placeholder="请选择员工岗位">
                  <el-option :label="obj.position" :value="obj.position" v-for="obj in deptChildren" :key="obj.id"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="员工头像" label-width="100px">
                <el-upload
                    class="avatar-uploader"
                    action="http://localhost:9000/api/file/oss"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess2">
                  <img v-if="staff.avatar" :src="staff.avatar" class="avatar" alt="">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>

            </el-form>

            <div slot="footer" class="dialog-footer">
              <el-button @click="cancel">取 消</el-button>
              <el-button type="primary" @click="updateBtn">确 定</el-button>
            </div>

          </el-dialog>

        </div>

      </el-tab-pane>

      <el-tab-pane label="添加员工">

        <el-form ref="form" :model="form" label-width="80px">
          <div class="box">
            <el-form-item label="员工姓名">
              <el-input v-model="form.name" style="width:400px"></el-input>
            </el-form-item>

            <el-form-item label="员工年龄">
              <el-input v-model="form.age" style="width:400px"></el-input>
            </el-form-item>

            <el-form-item label="员工性别">
              <el-select v-model="form.gender" placeholder="请选择员工性别" style="width:400px">
                <el-option label="男" value="男"></el-option>
                <el-option label="女" value="女"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="员工手机">
              <el-input v-model="form.phone" style="width:400px"></el-input>
            </el-form-item>

            <el-form-item label="员工住址">
              <el-input v-model="form.address" style="width:400px"></el-input>
            </el-form-item>

            <el-form-item label="毕业学校">
              <el-input v-model="form.graduationSchool" style="width:400px"></el-input>
            </el-form-item>

            <el-form-item label="学历">
              <el-select v-model="form.education" placeholder="请选择员工学历" style="width:400px">
                <el-option label="研究生" value="研究生"></el-option>
                <el-option label="本科" value="本科"></el-option>
                <el-option label="专科" value="专科"></el-option>
                <el-option label="其他" value="其他"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="员工头像">
              <el-upload
                  class="avatar-uploader"
                  action="http://localhost:9000/api/file/oss"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess">
                <img v-if="form.avatar" :src="form.avatar" class="avatar" alt="">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>

            <el-form-item label="部门名称">
              <el-select v-model="form.deptName" placeholder="请选择部门" style="width:400px">
                <el-option
                    :label="obj.deptName"
                    :value="obj.deptName"
                    v-for="obj in deptList2"
                    :key="obj.id">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="岗位">
              <el-select v-model="form.position" placeholder="请选择部门" style="width:400px">
                <el-option
                    :label="dep.position"
                    :value="dep.position"
                    v-for="dep in deptChildren2"
                    :key="dep.id">
                </el-option>
              </el-select>
            </el-form-item>

              <div class="btn">
                <el-form-item>
                  <el-button type="primary" @click="onSubmit">
                    <span>提交</span>
                  </el-button>
                  <el-button @click="form=''">重置</el-button>
                </el-form-item>
              </div>

          </div>
        </el-form>

      </el-tab-pane>

    </el-tabs>
  </div>
</template>

<script>
import {dept_boss,addEmp,getEmpAll,updateEmp,deleteEmp} from '@/api/core/manage/emp'
import {deptAndPost} from '@/api/core/dept/dept'

export default {
  data() {
    return {
      deptList:[],
      deptChildren:[],
      deptList2:[],
      deptChildren2:[],
      staff:{},
      currentPage: 1,
      imageUrl: '',
      list:[],
      form: {
        avatar:'',
        position:''
      },
      tableData: {},
      dialogFormVisible:false
    }
  },
  watch:{
    'staff.deptName':function (val) {
      this.deptList.forEach(obj => {
        if (obj.deptName === val){
          this.deptChildren = obj.children
          this.staff.position = this.deptChildren[0].position
        }
      })
    },
    'form.deptName':function (val) {
      this.deptChildren2 = []
      this.deptList2.forEach(obj => {
        if (obj.deptName === val){
          this.deptChildren2 = obj.children
        }
      })
      this.form.position = this.deptChildren2[0].position
    }
  },


  methods: {

    async getEmpAndDeptChild(){
      const {data:res} = await deptAndPost()
      this.deptList2 = res.data.list
    },
    //员工信息
     handleEdit(id) {
      this.staff.id = id
      this.tableData.records.forEach(obj => {
        if (obj.id === id){
          this.staff = obj
        }
      })
      this.getDeptAndPost()
      this.dialogFormVisible = true
    },

    async getDeptAndPost(){
      const  {data:res} = await deptAndPost()
      this.deptList = res.data.list
      this.deptList.forEach(obj => {
        if (obj.deptName === this.staff.deptName){
          this.deptChildren = obj.children
        }
      })
    },

    async updateBtn(){
      const {data:res} = await updateEmp(this.staff)
      if (res.code === 200){
        this.$message({
          message: '修改成功',
          type: 'success'
        })
        await this.getEmpList(this.currentPage, 5)
        this.dialogFormVisible = false
      }else {
        this.$message.error(res.message);
      }
    },

    cancel(){
      this.dialogFormVisible = false
      this.getEmpList(this.currentPage, 5)
    },

      handleDelete(id) {

      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteEmp(id).then((response) => {
          if(response.data.code === 200){
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.getEmpList(this.currentPage,5)
          }else {
            this.$message.error(response.data.message);
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    async getEmpList(){
      const {data:res} = await getEmpAll(this.currentPage,5)
      this.tableData = res.data.list
    },
    async handleCurrentChange(e){
      const {data:res} = await getEmpAll(e,5)
      this.tableData = res.data.list
    },

    //添加员工
    async getBoosAndDept(){
      const {data:res} = await dept_boss()
      this.list = res.data.list
    },
    async onSubmit() {
      const {data:res} = await addEmp(this.form)
      if (res.code === 200){
        this.$message({
          message: '添加成功',
          type: 'success'
        })
        this.form = {}
        await this.getEmpList(this.currentPage, 5)
      }else {
        this.$message.error(res.message);
      }
    },
    handleAvatarSuccess(res, file) {
      this.form.avatar = file.response;
    },
    handleAvatarSuccess2(res,file){
      this.staff.avatar = file.response;
    }

  },
  created() {
    this.getBoosAndDept()
    this.getEmpList()
    this.getEmpAndDeptChild()
  }
}
</script>

<style scoped>
  .box{
    margin:10px 700px;
  }
  .btn{
    margin-left:100px;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
